<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">

    <el-descriptions class="margin-top"  :column="3"  border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          活动名称
        </template>
        {{form.promotionName}}
      </el-descriptions-item>
      <el-descriptions-item >
        <template slot="label">
          <i class="el-icon-office-building"></i>
          活动开始时间
        </template>
        {{form.startTime}}
      </el-descriptions-item>
      <el-descriptions-item >
        <template slot="label">
          <i class="el-icon-office-building"></i>
          报名截止时间
        </template>
        {{form.applyEndTime}}
      </el-descriptions-item>
      <el-descriptions-item >
        <template slot="label">
          <i class="el-icon-office-building"></i>
          场次
        </template>
        <el-tag
          :key="tag.time"
          v-for="tag in hours"
          :disable-transitions="false"
          style="margin-right: 10px">
          {{tag.time}}
        </el-tag>
      </el-descriptions-item>

    </el-descriptions>

    <el-button type="primary" style="margin: 10px 0px" @click="openSkuList">选择商品</el-button>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane  v-for="tag in hours" :label="tag.time" :name="tag.time">

        <el-table v-loading="loading" :data="seckillApplyList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="活动名称" align="center" prop="promotionName" />
          <el-table-column label="状态" align="center" prop="promotionApplyStatus" >
            <template slot-scope="scope">
              <dict-tag :options="dict.type.mall_seckill_apply_state" :value="scope.row.promotionApplyStatus"/>
            </template>

          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                v-if="scope.row.isEnable == 0"
                @click="handleDelete(scope.row)"
                v-hasPermi="['mall-manager:coupon-activity:remove']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="_listSeckillApply"
        />


      </el-tab-pane>
    </el-tabs>



    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>



    <!--  商品选择   -->
    <el-dialog title="商品选择" :visible.sync="goodsopen" v-if="goodsopen" width="65%" append-to-body>
      <goods-dialog :selectedWay="promotionGoodsList" @selectedGoodsData="selectedGoodsData" @closeGoodsData="closeGoodsData"></goods-dialog>
    </el-dialog>


  </div>
</template>

<script>
import {  getSeckill} from "@/api/mall/promotion/seckill";
import {  listSekillApply} from "@/api/mall/promotion/seckill-apply";
export default {
  name: "MallSeckillGoods",
  dicts: ['mall_seckill_apply_state'],
  props: {
    seckillId: {
      type: String
    }
  },
  data() {
    return {
      activeName: "",
      goodsopen: false,
      // 总条数
      total: 0,
      // 遮罩层
      loading: true,
      // 表单参数
      form: {
        promotionName: '',
        applyEndTime: '',
        startTime: '',
        seckillRule: '',
        hours: '',
      },
      id: null,
      hours: [],
      seckillApplyList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        seckillId: this.seckillId,
        timeLine: this.activeName,
      },
    };
  },
  created() {
      this._getSeckill()
  },
  methods: {
    /** 查询秒杀信息 */
    _getSeckill() {
      getSeckill(this.seckillId).then(response => {
        this.form = response.data
        let hours = this.form.hours;
        this.hours = []
        if (hours && hours.length > 0) {
          let hourArr = this.form.hours.split(",");
          for (let i = 0; i < hourArr.length; i++) {
            let hour = hourArr[i];
            let item = {
              "time": hour
            }
            this.hours.push(item)
          }

        }
        this.activeName = this.hours[0].time
        this._listSeckillApply()
      })
    },

    /** 查询秒杀信息 */
    _listSeckillApply() {
      let param = {
        seckillId: this.seckillId,
        timeLine: this.activeName
      }
      this.seckillApplyList = []
      listSekillApply(param).then(response => {
        this.seckillApplyList = response.rows;
        this.total = response.total;
        this.loading = false;

      })
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.hours.length < 1) {
            this.$modal.msgError("请设置抢购时间段");
            return;
          }
          let pureHourr = this.hours.map(obj => obj.time);
          this.form.hours = pureHourr.join(",")


          if (this.form.id != null) {
            updateSeckill(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("emitSeckillAdd");
            });
          } else {
            addSeckill(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.$emit("emitSeckillAdd");
            });
          }

        }
      });
    },


    openSkuList() {
      // 显示商品选择器
      this.goodsopen = true;
      let data = JSON.parse(JSON.stringify(this.seckillApplyList));
      data.forEach((e) => {
        e.id = e.skuId;
      });

    },

    cancel() {
      this.$emit("emitSeckillCancel");
    },

    handleClose(tag) {
      this.hours.splice(this.hours.indexOf(tag), 1);
    },

    handleClick() {

    }
  }
};
</script>
